<template>
	<view class="content">
		<view class="top">
			<view class="img">
				<image src="@/static/home/home-bg.jpg" mode=""></image>
			</view>
		</view>
		<CustomNav :topBgColor="topBgColor" :color="titleColor" :backColor="'#999'" :isBack="true" :custom="custom"
			:title="'投诉办理'"></CustomNav>
		<view class="bottom">
			<view class="info-item">
				<view class="tab">
					<view class="all" :class="fairActive===0?'active':''" @click="fairActive=0">
						全部
						<view class="line" v-if="fairActive===0" @click="fairActive=0">
						</view>
					</view>
					<view class="all" :class="fairActive===1?'active':''" @click="fairActive=1">
						待受理
						<view class="line" v-if="fairActive===1" @click="fairActive=1">
						</view>
					</view>
					<view class="all" :class="fairActive===4?'active':''" @click="fairActive=4">
						处理中
						<view class="line" v-if="fairActive===4" @click="fairActive=4">
						</view>
					</view>
					<view class="all" :class="fairActive===3?'active':''" @click="fairActive=3">
						驳回
						<view class="line" v-if="fairActive===3" @click="fairActive=3">
						</view>
					</view>
					<view class="all" :class="fairActive===2?'active':''" @click="fairActive=2">
						已办结
						<view class="line" v-if="fairActive===2" @click="fairActive=2">
						</view>
					</view>
				</view>
			</view>
			<template v-if="aList.length>0">
				<view class="info-item" @click="navigate('/pages/mine/transaction/transaction?id='+item.id)"
					v-for="item in aList" :key="item.id">
					<view class="title">
						<view class="title-left">
							<view class="cod">
								投诉编码：{{item.code}}
							</view>
							<view class="copy-content">
								<view class="icon">
									<image src="@/static/mine/copy.png" mode=""></image>
								</view>
								<view class="copy" @click.stop="copyMessage(item.code)">
									复制
								</view>
							</view>
						</view>
						<view class="title-right" style="color: #027BFF;" v-if="item.status==2">
							已办结
						</view>
						<view class="title-right" style="color: #1BA035;" v-if="item.status==4">
							处理中
						</view>
						<view class="title-right" style="color: #FF8D02;" v-if="item.status==1">
							待受理
						</view>
						<view class="title-right" style="color: #EA0000;" v-if="item.status==3">
							已驳回
						</view>
					</view>
					<view class="string" style="margin: 20rpx 0;"></view>
					<view class="small-title">
						投诉人姓名：
					</view>
					<view class="project">
						{{item.reflectorName}}
					</view>
					<view class="small-title">
						投诉时间：
					</view>
					<view class="project">
						{{item.salaryTime}}
					</view>
				</view>
			</template>
			<view style="display: flex;justify-content: center;margin-top: 30rpx;" v-else>暂无数据</view>

		</view>
	</view>
</template>

<script>
	import {
		getCustomNavData
	} from '@/util/util.js'
	import {
		examineComplaintListApi
	} from '@/api/mine.js'
	export default {

		data() {
			return {
				status: 0,
				custom: null,
				topBgColor: 'rgba(0,0,0,0)',
				titleColor: '#fff',
				fairActive: 0,
				aList: []
			}
		},
		watch: {
			fairActive() {
				this.getExamineComplaintListApi()
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 50) {
				this.topBgColor = '#117DFF';
			} else {
				this.topBgColor = 'rgba(0,0,0,0)';
			}
		},
		methods: {
			getExamineComplaintListApi() {
				examineComplaintListApi({
					status: this.fairActive
				}).then((res) => {
					this.aList = res
				})
			},
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			copyMessage(value) {
				uni.setClipboardData({
					data: value,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: "复制成功",
								});
							},
						});
					},
				});
			},
		},
		mounted() {
			this.custom = getCustomNavData();
			this.getExamineComplaintListApi()
		},
		onShow() {
			this.getExamineComplaintListApi()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-color: #F6F6F6;

		.top {
			position: relative;
			width: 100%;
			height: 500rpx;

			.img {
				width: 100%;
				height: 120%;

				image {
					width: 100%;
					height: 100%;
					z-index: -1;
				}
			}


		}

		.bottom {
			position: relative;
			width: 100%;
			border-radius: 40rpx;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #F6F6F6;
			border-radius: 45rpx 45rpx 0 0;
			z-index: 99;
			margin-top: -35rpx;

			.info-item {
				// position: absolute;
				// bottom: 40rpx;
				// left: 30rpx;
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				// align-items: center;
				width: 100%;
				// height: 155rpx;
				padding: 30rpx;
				box-sizing: border-box;
				border-radius: 30rpx;
				background-color: #fff;
				margin-bottom: 30rpx;

				.tab {
					width: 100%;
					height: 80rpx;
					display: flex;
					margin-top: 20rpx;
					justify-content: space-between;

					.all {
						//margin: 0 40rpx;

						.line {
							margin: 20rpx auto;
							width: 60rpx;
							height: 20rpx;
							background-color: #0F7DFF;
							border-radius: 30rpx;
						}
					}

					.all.active {
						color: #0F7DFF;
					}
				}

				.string {
					width: 100%;
					height: 5rpx;
					background-color: #F7F7F7;
				}

				.title {
					display: flex;
					justify-content: space-between;

					.title-left {
						display: flex;

						.cod {
							color: #000;
							font-weight: 900;
							font-size: 35rpx;
						}

						.copy-content {
							background-color: #D9EBFF;
							border-radius: 35rpx;
							display: flex;
							width: 130rpx;
							height: 50rpx;
							justify-content: center;
							align-items: center;
							padding-right: 20rpx;
							margin-left: 10rpx;

							.icon {
								width: 40rpx;
								height: 40rpx;
								margin-left: 20rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.copy {}
						}


					}



					.title-right {}
				}

				.small-title {
					margin: 20rpx 0;
					color: #767676;
				}

				.project {
					margin: 20rpx 0;
					font-weight: 900;

				}
			}

		}
	}
</style>